<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<head>
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/style/gen-style.css"
	type="text/css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/style/mkv/jquery-ui.css"
	type="text/css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/style/makovo-style.css"
	type="text/css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/style/jquery.steps.css"
	type="text/css" />

<script type="text/javascript"
	src="<%=request.getContextPath()%>/scripts/jquery-2.1.3.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/scripts/gen.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/scripts/jquery.steps.min.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/scripts/inegi.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/scripts/spin.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/scripts/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/scripts/auxiliares.js"></script>

<script type="text/javascript">
	//text ui-widget-content ui-corner-all
	var mVal = new Gen.Validator('val');

	$(function() {
		if (validaSesion("${sessionScope.LoginMenu}"))
			document.location = "index.jsp";
		var form = $("#ApplicantRegister").show();

		form.steps({
			headerTag : "h3",
			bodyTag : "fieldset",
			transitionEffect : "slideLeft",
			showFinishButtonAlways : false,
			enableFinishButton : false
		});
		$("#sexo_gender").buttonset();
		$("#estadocivil").buttonset();
		$('#ApplicantRegister_date').datepicker(
				{
					changeMonth : true,
					changeYear : true,
					monthNames : [ 'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre',
							'Octubre', 'Noviembre', 'Diciembre' ],
					monthNamesShort : [ 'Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic' ],
					dayNames : [ 'Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado' ],
					dayNamesShort : [ 'Dom', 'Lun', 'Mar', 'Mié', 'Juv', 'Vie', 'Sáb' ],
					dayNamesMin : [ 'Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sá' ],
					yearRange : "1900:2000",
					dateFormat : 'yy/mm/dd'
				});

		$('[name=stateId]').change(function() {
			var stateId = $(this).val();
			var state = findValue(Inegi.states, 'id', stateId);
			$('[name=locId]').find('option').remove();
			$('[name=locId]').append($('<option value="-1">... Seleccione una opción ...</option>'))
			$('[name=lonng]').val("");
			$('[name=lat]').val("");

			$('[name=state]').val(state.name);

			Inegi.fillCities($('[name=cityId]'), stateId, true);
		});

		$('[name=cityId]').change(function() {
			var cityId = $(this).val();
			Inegi.fillTowns($('[name=locId]'), $('[name=stateId]').val(), cityId, true);

			var selCity = findValue(Inegi.cities, 'clave_municipio', cityId);

			$('[name=city]').val(selCity.nombre_municipio);
			$('[name=lonng]').val(selCity.lng);
			$('[name=lat]').val(selCity.lat);
		});

		$('[name=locId]').change(function() {
			var locId = $(this).val();

			$('[name=loc]').val($('[name=locId] :selected').text());
		});

		function setFields(userType) {
			if (userType == "4") {
				showOverlay(true);
				$('.lock').attr('disabled', 'disabled')
				getUserInfo()
			} else
				$('.lock').removeClass('lock')

		}

		function getUserInfo() {
			new Gen.AjaxCall().post('ajax/GetUserInfo.action', {}, function(a) {
				if (a != null) {
					$('[name=stateId]').val(a.idState)
					$('[name=state]').val(findValue(Inegi.states, "id", 28).name)

					Inegi.fillCities($('[name=cityId]'), a.idState, false, function() {
						hideOverlay();
						$('[name=cityId]').val(a.idCity);
						$('[name=city]').val($('[name=cityId] :selected').text());

						var selCity = findValue(Inegi.cities, 'clave_municipio', a.idCity);

						$('[name=lonng]').val(selCity.lng);
						$('[name=lat]').val(selCity.lat);

						Inegi.fillTowns($('[name=locId]'), a.idState, a.idCity, true);
					});

				}

			}, function(er) {
				hideOverlay();
			});
		}

		Inegi.fillStates($('[name=stateId]'));

		setFields("${sessionScope.LogintipoUsr}")
	});

	function validate() {
		var errors = mVal.validate($('[name=ApplicantRegister]'), function() {
		});

		if (errors.length != 0) {
			$('#ApplicantRegister').steps('previous');
			$('#ApplicantRegister').steps('previous');

		}

		if (errors.length == 0)
			$('.lock').removeAttr('disabled');

		return errors.length == 0;
	}
</script>

</head>
<body>
	<div style="width: 1100px; margin: 0 auto">
		<div class="headerMK">
			<div class="logo">
				<span class="hdTitulo">Sistema para Aplicación de Subsidio
					2015</span>
			</div>
			<div
				style="font-size: 0.26em; top: -50px; position: relative; width: 500px; float: right; text-align: right; padding-right: 10px">
				<i>${sessionScope.LoginNombre}</i><b><a
					href="/makovo/paginas/index.jsp"> - Cerrar Sesión</a></b>
			</div>
		</div>
		<div class="divContenido">
			<a href="<%=request.getContextPath()%>/paginas/menu.jsp">Regresar
				al menú</a><br />
			<div>
				<h3 style="padding-left: 1em; font-size: 2em">Registro de
					aplicante a Subsidio</h3>
			</div>

			<div style="width: 1000px; margin: -5px auto;" id="tab">
				<s:form action="ApplicantRegister">
					<h3>Datos Generales</h3>
					<fieldset>
						<div style="width: 100%; float: left;">
							<div style="float: left">
								CURP:
								<s:textfield name="curp" theme="simple" cssClass="inputText"
									val="curp" maxlength="18" />
							</div>
							<div style="float: left; padding-left: 10px">
								Nombre (s):
								<s:textfield name="name" theme="simple" cssClass="inputText"
									val="text-spaces" maxlength="50" />
							</div>
							<div style="float: left; padding-left: 10px">
								Apellido Paterno:
								<s:textfield name="lastName" theme="simple" cssClass="inputText"
									val="text-spaces" maxlength="50" />
							</div>
							<div style="float: left; padding-left: 10px">
								Apellido Materno:
								<s:textfield name="secondLastName" theme="simple"
									cssClass="inputText" val="text-spaces" maxlength="50" />
							</div>
						</div>
						<div style="width: 100%; float: left; padding-top: 10px">
							<div style="float: left">
								Fecha de Nacimiento:
								<s:textfield name="date" theme="simple" cssClass="inputText"
									val="dateYYYYMMDD" maxlength="10" />
							</div>
							<div style="float: left; padding-left: 10px" id="sexo_gender">
								Sexo:
								<s:radio name="sex" list="#{'1':'Masculino','2':'Femenino'}"
									value="1" theme="simple" />
							</div>
						</div>
						<div style="width: 100%; float: left; padding-top: 10px">
							<div style="float: left; padding-left: 10px" id="estadocivil">
								Estado Civil:
								<s:radio name="status"
									list="#{'1':'Soltero(a)','2':'Casado(a)','3':'Viudo(a)','4':'Divorciado(a)'}"
									value="1" theme="simple" />
							</div>
						</div>
						<div style="width: 100%; float: left; padding-top: 10px">
							<div style="float: left">
								Tipo de Identificación:<BR />
								<s:select theme="simple"
									list="#{'1':'INE', '2':'Cartilla', '3':'Pasaporte', '4':'Cédula Profesional'}"
									name="typeID" cssClass="inputSelect" />
							</div>
							<div style="float: left; padding-left: 10px">
								Folio:
								<s:textfield name="folioID" theme="simple" cssClass="inputText"
									val="text-spaces" maxlength="20" />
							</div>
							<div style="float: left; padding-left: 10px">
								Teléfono:
								<s:textfield name="phoneNumber" theme="simple"
									cssClass="inputText" maxlength="13" />
							</div>
							<br /> <br /> <br />
							<s:if test="hasActionErrors()">
								<div class="server-error" id="server-error">
									<span class="server-error-title">Verifique los
										siguientes campos:</span><br />
									<s:actionerror />
								</div>
								<script>
									$(function() {
										$('#server-error').dialog({
											autoOpen : true,
											resizable : true,

											width : 500,
											modal : true,
											buttons : {
												'Cerrar' : function() {
													$(this).dialog("close");
												}
											}
										});
									});
								</script>
							</s:if>
						</div>
					</fieldset>
					<h3>Domicilio</h3>
					<fieldset>
						<div style="width: 100%; float: left; padding-top: 10px">
							<div style="float: left">
								Calle:
								<s:textfield name="street" style="width:300px" theme="simple"
									cssClass="inputText dis" val="text-spaces" maxlength="45" />
							</div>
							<div style="float: left; padding-left: 10px">
								Número externo:
								<s:textfield name="extNumber" theme="simple"
									cssClass="inputText dis" val="text-spaces" maxlength="10" />
							</div>
							<div style="float: left; padding-left: 10px">
								Número interno:
								<s:textfield name="intNumber" theme="simple"
									cssClass="inputText dis" val="text-spaces" maxlength="10" />
							</div>
							<div style="float: left; padding-left: 10px">
								Colonia:
								<s:textfield name="col" theme="simple"
									cssClass="inputText dis" val="text-spaces" maxlength="30" />
							</div>
						</div>
						<div style="width: 100%; float: left; padding-top: 10px">
							<div style="float: left">
								Estado:<br />
								<s:select theme="simple" list="#{'1':'Mostrar estados'}"
									name="stateId" cssClass="dis lock" val="selected"
									wrongOption="-1" />
								<s:hidden name="state" value="-1" />
							</div>
							<div style="float: left; padding-left: 10px">
								Ciudad:<br />
								<s:select theme="simple" list="#{'1':'Mostrar estados'}"
									name="cityId" cssClass="inputSelect dis lock" val="selected"
									wrongOption="-1" />
								<s:hidden name="city" value="-1" />
							</div>
							<div style="float: left; padding-left: 10px">
								Localidad:<br />
								<s:select theme="simple" list="#{'1':'Mostrar estados'}"
									name="locId" cssClass="inputSelect dis" val="selected"
									wrongOption="-1" />
								<s:hidden name="loc" value="-1" />
							</div>
						</div>
						<div style="width: 100%; float: left; padding-top: 10px">
							<div style="float: left">
								Longitud:
								<s:textfield name="lonng" theme="simple"
									cssClass="inputText dis" readonly="true" />
							</div>
							<div style="float: left; padding-left: 10px">
								Latitud:
								<s:textfield name="lat" theme="simple" cssClass="inputText dis"
									readonly="true" />
							</div>
							<div style="float: left; padding-left: 10px">
								Código postal:
								<s:textfield name="cp" theme="simple" cssClass="inputText dis"
									val="just-numbers" maxlength="7" />
							</div>
						</div>
					</fieldset>
					<h3>Finalizar</h3>
					<fieldset>
						<s:submit value="Generar registro" theme="simple"
							cssClass="class java.util.HashMap t-btn tinny change"
							onClick="if (!validate()) return false;" />
					</fieldset>
				</s:form>
			</div>
		</div>
	</div>
</body>
</html>